<template>
 <div class="container">
   <div ref="chart_ref" style="width: 600px; height: 400px"></div>
 </div>
</template>

<script>
export default {
  name: 'userData',
  components: {},
  props: ['userList'],
  data () {
    return {
      nvAdminNum: 0,
      nanAdminNum: 0,
      nvStuNum: 0,
      nanStuNum: 0
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    for (let i = 0; i < this.userList.length; i++) {
      if (this.userList[i].role === 'admin' && this.userList[i].sex === '女') {
        this.nvAdminNum = this.nvAdminNum + 1
      } else if (this.userList[i].role === 'admin' && this.userList[i].sex === '男') {
        this.nanAdminNum = this.nanAdminNum + 1
      } else if (this.userList[i].role === 'student' && this.userList[i].sex === '女') {
        this.nvStuNum = this.nvStuNum + 1
      } else if (this.userList[i].role === 'student' && this.userList[i].sex === '男') {
        this.nanStuNum = this.nanStuNum + 1
      }
    }
    this.initChart()
  },
  methods: {
    initChart () {
      var mChart = this.$echarts.init(this.$refs.chart_ref)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: this.nvAdminNum, name: `女教师数：${this.nvAdminNum}` },
            { value: this.nanAdminNum, name: `男教师数：${this.nanAdminNum}` },
            { value: this.nvStuNum, name: `女学生数：${this.nvStuNum}` },
            { value: this.nanStuNum, name: `男学生数：${this.nanStuNum}` }
          ]
        }]
      }
      mChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">

</style>
